import React from 'react'
import './index.css'
import { useState } from 'react'

//第八步：接收传过来的值，并给到对应的dom中
export default function Item({id,todo,done}) {
    //第十步：//isActive状态用来保存li的active类是否添加和按钮的display状态
    const [isActive,setIsActive]=useState(false)
    //第十二步：移出移出事件的函数
    const mouseMoveHandle = (bool)=>{
        return ()=>{
            setIsActive(bool)
        }
    }
    return (
        
        // 第十一步：给li标签绑定移入移出事件，移入就设置active类名，移出就不设置
        <li className={isActive?'active':''} onMouseEnter={mouseMoveHandle(true)} onMouseLeave={mouseMoveHandle(false)}>
            <label>
                <input type="checkbox" checked={done}/>
                <span>{todo}</span>
            </label>
            <button className="btn btn-danger" style={{ display:isActive?'block':'none' }}>删除</button>
        </li>
    )
}
